<template>
  <div>
    <div class="banner" @click="handleBannerClick">
      <img class="banner-img" src="http://img1.qunarzz.com/sight/p0/1607/73/735509c0fc933108b4.img.jpg_600x330_ae6e9c2e.jpg" alt="">
      <div class="banner-info">
        <div class="banner-title">郑州银基乐海水世界</div>
        <div class="banner-number">
          <span class="iconfont">&#xe7d4;</span>
          15
        </div>
      </div>
    </div>
    <Fade>
      <CommonCarousel 
      v-show='showCarousel' 
      :imgs='imgs'
      @close='handleCarouselClose'
      ></CommonCarousel>
    </Fade>
    <div>
      <swiper :options="swiperOption">
        <swiper-slide v-for="(item, index) in banners" :key="index">
          <img class="swiper-img" :src="item.imagepath">
        </swiper-slide>
        <!-- <div class="swiper-pagination"  slot="pagination"></div> -->
      </swiper>
    </div>
    
  </div>
  
</template>
<script>
import axios from 'axios'
import CommonCarousel from 'common/carousel/Carousel'
import Fade from 'common/fade/FadeAnimation'
export default {
  name: 'Banner',
  data () {
    return {
      showCarousel: false,
      imgs: [
        "http://img1.qunarzz.com/sight/p0/1607/73/735509c0fc933108b4.img.jpg_600x330_ae6e9c2e.jpg",
        "http://img1.qunarzz.com/sight/p0/1606/74/74e9176d45ebc0db90.img.png_350x240_3ea8a2c6.png"
      ],
      banners: [],
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30,
        // centeredSlides: true
        freeMode : true
      }
    }
  },
  components: {
    'CommonCarousel': CommonCarousel,
    'Fade': Fade
  },
  methods: {
    handleBannerClick () {
      this.showCarousel = true
    },
    handleCarouselClose () {
      this.showCarousel = false
    },
    getBanner(){
      let urlString = 'http://192.168.0.59:8080/api/v2/banner'
      axios.get(urlString).then(res => {
        this.banners = res.data.items;

        
      }).catch(e => {
        console.log(e)
        
      })
    }
  },
  created() {
    this.getBanner()
  }
}
</script>
<style lang="stylus" scoped>
  .swiper-img
    width 100%
  .banner
    overflow hidden
    position relative
    height 0
    padding-bottom 55%
    .banner-img
      width 100%
    .banner-info
      display flex
      position absolute
      left 0
      right 0
      bottom 0
      line-height .6rem
      color #fff
      background-image linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
      .banner-title
        flex 1
        font-size .32rem
        padding 0 .2rem
      .banner-number
        padding 0 .4rem
        height .32rem
        line-height .32rem
        border-radius .2rem
        background rgba(0,0,0,.8)
        font-size .24rem
</style>
